/**
 * Lightbox en JQuery
 * Le premier objectif de celle ci est de remplacer la lightbox sous Mootools puisque nous passons
 * tous nos scripts sous JQuery
 * La seconde est d'être générique et non juste pour des images pour la suite des devs sur DMI
 * 
 * @author Filament
 * 
 * Inspiré du tutoriel disponible sur dryan.com
 */


/**
 * Dans un premier temps nous chargons la fonction une fois le DOM chargé
 */
$( document ).ready( function() {
    lightbox();
} );

/**
 * La fonction lightbox en elle même
 */
function lightbox() {
    var links = $( 'a[rel^=lightbox]' ); // ^= permet de prendre tout élément avec un rel qui commencer par lightbox
    var overlay = $( jQuery( '<div id="overlay" style="display: none"></div>' ) ); //Fond noir transparent
    var container = $( jQuery( '<div id="lightbox" style="display: none"></div>' ) ); //Boite blanche
    var target = $( jQuery( '<div class="target"></div>' ) ); //Là où on affiche l'image
    var close = $( jQuery( '<a href="#close" class="close">&times; Fermer</a>' ) ); //fermer
    var prev = $( jQuery( '<a href="#prev" class="prev">&laquo; Pr&eacute;c&eacute;dent</a>' ) );//précédent
    var next = $( jQuery( '<a href="#next" class="next">Suivant &raquo;</a>' ) );//suivant

    //Ajouter ces éléments à la page
    $( 'body' ).append( overlay ).append( container ); //On ajoute l'overlay et à l'intérieur le container au body
    container.append( close ).append( target ).append( prev ).append( next ); //On ajoute la navigation et la div de l'image au container
    container.show().css( {'position' : 'fixed', 'top': Math.round( ($( window ).height() - container.outerHeight() ) / 2 ) + 'px', 'left': Math.round( ($( window ).width() - container.outerWidth() ) / 2 ) + 'px', 'margin-top': 0, 'margin-left': 0} ).hide(); //On définit la taille du tout
  //Si on clique sur close :
    close.click( function( c ) {
        c.preventDefault(); //Empêche l'action html d'un a href
        overlay.add( container ).fadeOut( 'normal' ); //On efface doucement la box
    } );

    //Si on appuie sur next :
    prev.add( next ).click( function( c ) {
        c.preventDefault(); //Empêche l'action html d'un lien
        var current = parseInt( links.filter( '.selected' ).attr( 'lb-position' ),10 );
        var to = $( this ).is( '.prev' ) ? links.eq( current - 1 ) : links.eq( current + 1 );
        if( !to.size() ) {
            to = $( this ).is( '.prev' ) ? links.eq( links.size() - 1 ) : links.eq( 0 );
        }
        if( to.size() ) {
            to.click();
        }
    } );

    //Pour chaque lien : 
    links.each( function( index ) {
    	$(this).children(":first-child").css({"max-width": 600, "max-height": 600});
        var link = $( this );
        link.click( function( c ) {
            c.preventDefault();
            
            open( link.attr( 'href' ) ); //On ouvre dans notre box le lien
            links.filter( '.selected' ).removeClass( 'selected' ); //On supprime la class selected au lien précédent
            link.addClass( 'selected' ); //On l'ajoute au lien courant
        } );
        link.attr( {'lb-position': index} );
    } );

    //Nous ouvrons le lien et stockons ça dans une variable
    var open = function( url ) {
        if( container.is( ':visible' ) ) { //Si le container est visible
            target.children().fadeOut( 'normal', function() { //On efface l'affichage précédent
            target.children().remove(); //On le supprime du DOM
            loadImage( url ); //On charge l'image couorante
            } );
        } else { //Si le container n'est pas visible
            target.children().remove(); //On supprime du DOM l'affichage précédent
            overlay.add( container ).fadeIn( 'normal',function(){ //On fait apparaitre l'image
            loadImage( url );
            } );
        }
    }

    //la fonction qui charge les images
    var loadImage = function( url ) { //L'url de l'image est passé en paramètre
        if( container.is( '.loading' ) ) { return; } //Si le  container est déjà en loading, on arrête
        container.addClass( 'loading' ); //Sinon on ajoute la class loading au container
        var img = new Image(); //On variable qui va gérer l'image
        img.onload = function() { //Quand l'image est chargée
            img.style.display = 'none'; //On ne l'affiche pas
            
            var fullWidth = img.width;
            var fullHeight = img.height;
            var minWidth = img.width;
            var minHeight = img.height;
            
            var maxWidth = ( $( window ).width() - parseInt( container.css( 'padding-left' ),10 ) - parseInt( container.css( 'padding-right' ), 10 ) ) - 100; //On calcule sa largeur maxi
            var maxHeight = ( $( window ).height() - parseInt( container.css( 'padding-top' ),10 ) - parseInt( container.css( 'padding-bottom' ), 10 ) ) - 100; //On calcule sa hauteur maxi
            if( img.width > maxWidth || img.height > maxHeight ) { // On met à l'échelle si la largeur ou la hauteur dépasse la taille de l'écran
                var ratio = img.width / img.height;
                if(img.width > img.height)
                	ratio = img.height / img.width;
                
                if( img.height >= maxHeight && img.width < maxWidth) {
                	minHeight = img.height = maxHeight;
                    minWidth = img.width = maxHeight * ratio;
                } else if ( img.width >= maxWidth && img.height < maxHeight) {
                	minWidth = img.width = maxWidth;
                	minHeight = img.height = maxWidth * ratio;
                } else {
                	if(maxHeight > maxWidth) {
                		minHeight = img.height = maxHeight;
                        minWidth = img.width = maxHeight * ratio;
                	} else {
                		minWidth = img.width = maxWidth;
                    	minHeight = img.height = maxWidth * ratio;
                	}
                }
            }
            var resized = true;
            //On fait apparaitre l'image redimensionnée
            var positionTop = Math.round( ($( window ).height() - img.height - parseInt( container.css( 'padding-top' ),10 ) - parseInt( container.css( 'padding-bottom' ),10 ) ) / 2 ) + 'px';
            var positionLeft = Math.round( ($( window ).width() - img.width - parseInt( container.css( 'padding-left' ),10 ) - parseInt( container.css( 'padding-right' ),10 ) ) / 2 ) + 'px'
            container.animate( {'width': img.width,'height': img.height, 'top': positionTop, 'left': positionLeft},'normal', function(){
                target.append( img );
                $( img ).fadeIn( 'normal', function() {
                    container.removeClass( 'loading' );
                } );
            } );
            
            img.onclick = function() {
            	$( img ).fadeOut( 'normal', function() {
                    container.addClass( 'loading' );
                } );
            	if(resized == true) {
            		container.animate( {'width': fullWidth,'height': fullHeight, 'top': positionTop, 'left': positionLeft},'normal', function(){
            			img.height = fullHeight;
            			img.width = fullWidth;
                        target.append( img );
                        $( img ).fadeIn( 'normal', function() {
                            container.addClass( 'loading' );
                        } );
                    } );
            		resized = false;
            	} else {
            		container.animate( {'width': minWidth,'height': minHeight, 'top': positionTop, 'left': positionLeft},'normal', function(){
            			img.height = minHeight;
            			img.width = minWidth;
                        target.append( img );
                        $( img ).fadeIn( 'normal', function() {
                            container.removeClass( 'loading' );
                        } );
                    } );
            		resized = true;
            	}
            }
        	
        }
        img.src = url; //On charge l'image, cette ligne est présente après le code pour compatibilité sous IE7
    }
}


/**
 * Une lightbox pour div AJAX
 */
function lightboxDiv(url, args) {
    var overlay = $( jQuery( '<div id="overlay" style="display: none"></div>' ) ); //Fond noir transparent
    var container = $( jQuery( '<div id="lightbox" style="display: none"></div>' ) ); //Boite blanche
    var target = $( jQuery( '<div class="target"></div>' ) ); //Là où on affiche la div
    var close = $( jQuery( '<a href="#close" class="close">&times; Fermer</a>' ) ); //fermer
    
    //Ajouter ces éléments à la page
    $( 'body' ).append( overlay ).append( container ); //On ajoute l'overlay et à l'intérieur le container au body
    container.append( close ).append( target ); //On ajoute la navigation et la div de l'image au container
    container.show().css( {'position' : 'fixed', 'top': Math.round( ($( window ).height() - container.outerHeight() ) / 2 ) + 'px', 'left': Math.round( ($( window ).width() - container.outerWidth() ) / 2 ) + 'px', 'margin-top': 0, 'margin-left': 0} ).hide(); //On définit la taille du tout
  //Si on clique sur close :
    close.click( function( c ) {
        c.preventDefault(); //Empêche l'action html d'un a href
        overlay.add( container ).fadeOut( 'normal' ); //On efface doucement la box
        target.remove();
    } );
    
    //Nous ouvrons le lien et stockons ça dans une variable
    function open ( url ) {
        if( container.is( ':visible' ) ) { //Si le container est visible
            target.children().fadeOut( 'normal', function() { //On efface l'affichage précédent
            target.children().remove(); //On le supprime du DOM
            loadDiv( url ); //On charge la div courante
            } );
        } else { //Si le container n'est pas visible
            target.children().remove(); //On supprime du DOM l'affichage précédent
            overlay.add( container ).fadeIn( 'normal',
            loadDiv( url )
            );
        }
    }
    
    //la fonction qui charge les divs
    var loadDiv = function loadDiv( url ) {
    	target.addClass('divContentLightBox');
		target.append($.ajax({
		    url: url,
		    global: false,
		    type: "POST",
		    data: (args),
		    dataType: "html",
		    async:false
		 }
		).responseText);	
	}

    open(url);
}

function lightboxDivClose() {
	var overlay = $('#overlay'); //Fond noir transparent
    var container = $('#lightbox'); //Boite blanche
    var target = $('#target'); //Là où on affiche la div
	overlay.fadeOut( 'normal' ); //On efface doucement la box
    target.remove();
}